<template>
  <view class="container">
    <u-navbar title="详情" bgColor="rgba(255,255,255,1)" leftIconColor="#000" titleStyle="color:#000;font-weight: bold;"></u-navbar>
    <view class="top">
      <view class="top_info flex justify-btw align-center">
        <image 
          style="width: 193rpx;height: 56rpx;" 
          :src="
			detailInfo.status==1 ? '/static/images/wait_first.png'
			: detailInfo.status==6 ? '/static/images/wait_end.png'
			: (detailInfo.status==3||detailInfo.status==4||detailInfo.status==5) ? '/static/images/kfz.png'
			: detailInfo.status==7 ? '/static/images/already.png'
			: ''
		  " 
		  mode="aspectFit"
        ></image>
        <image 
          style="width: 130rpx;height: 130rpx;" 
          :src="
			detailInfo.status==1 ? '/static/images/wait_icon.png'
			: detailInfo.status==6 ? '/static/images/wait_icon.png'
			: (detailInfo.status==3||detailInfo.status==4||detailInfo.status==5) ? '/static/images/kfz_icon.png'
			: detailInfo.status==7 ? '/static/images/already_icon.png'
			: ''
          " 
		  mode=""
        ></image>
      </view>
      <view class="top_image flex justify-btw align-center" v-if="detailInfo.orderNodeList&&detailInfo.orderNodeList.length==3">
        <view @tap="clickTop(0)" class="top_image_item flex flex_clm justify-btw align-center">
          <image :src="detailInfo.status>3 ? '/static/images/pm_select.png' : '/static/images/pm.png'" mode=""></image>
          <text style="margin-bottom: 5rpx;">{{detailInfo.orderNodeList[0].name}}</text>
          <text>{{ (detailInfo.orderNodeList[0].nodeTime).split(' ')[0] }}</text>
        </view>
        <image class="dot" :src="detailInfo.status>4 ? '/static/images/dot_select.png' : '/static/images/dot.png'" mode=""></image>
        <view @tap="clickTop(1)" class="top_image_item flex flex_clm justify-btw align-center">
          <image :src="detailInfo.status>4 ? '/static/images/lm_select.png' : '/static/images/lm.png'" mode=""></image>
          <text style="margin-bottom: 5rpx;">{{detailInfo.orderNodeList[1].name}}</text>
          <text>{{ (detailInfo.orderNodeList[1].nodeTime).split(' ')[0] }}</text>
        </view>
        <image class="dot" :src="detailInfo.status>5 ? '/static/images/dot_select.png' : '/static/images/dot.png'" mode=""></image>
        <view @tap="clickTop(2)" class="top_image_item flex flex_clm justify-btw align-center">
          <image :src="detailInfo.status>5 ? '/static/images/jd_select.png' : '/static/images/jd.png'" mode=""></image>
          <text style="margin-bottom: 5rpx;">{{detailInfo.orderNodeList[2].name}}</text>
          <text>{{ (detailInfo.orderNodeList[2].nodeTime).split(' ')[0] }}</text>
        </view>
      </view>
    </view>
    <view class="item-info margin-btw">
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
	<!-- 报价单 -->
      <view class="item-info_order" v-show="detailInfo.orderNodeList.length>0">
		  <view class="item-info_order_nav flex justify-center align-center">
		  	<image 
				src="http://shejihm.oss-cn-beijing.aliyuncs.com/202404081716451712567805660400ddad8.png" 
				mode=""
				style="width: 52rpx;height: 52rpx;position: absolute;top: 0;left: 0;"
			></image>
			<text class="title">设计很忙设计制图服务报价单</text>
		  </view>
      	<view class="item-info_order_title flex justify-btw" style="margin-top: 6rpx;margin-bottom: 8rpx">
      		<text>项目名称：{{ detailInfo.name }}</text>
			<text>客户：{{ detailInfo.userInfo.nickname }}</text>
      	</view>
      	<u-table
			class="utable"
      	  align="left"
      	  font-size="24"
      	  color="#333"
      	  padding="22rpx 20rpx"
      	  :th-style="{
      	    fontFamily: 'PingFang SC',
      	    fontWeight: 'bold',
      	    fontSize: '22rpx',
      	    color: '#333333',
      	    lineHeight: '30rpx'
      	  }"
      	>
      	  <u-tr>
      	    <u-th>服务项目</u-th>
      	    <u-th>单价</u-th>
      	    <u-th>面积</u-th>
      	    <u-th>订单金额</u-th>
      	  </u-tr>
      	  <u-tr style="background-color: yellow;" v-for="item in detailInfo.orderProjectList" :key="item.id">
      	    <u-td>{{item.name}}</u-td>
      	    <u-td>{{item.unitPrice}}</u-td>
      	    <u-td>{{item.proportion}}</u-td>
      	    <u-td>{{item.price}}</u-td>
      	  </u-tr>
		  <!-- 统计 -->
		  <u-tr style="background-color: yellow;">
		    <u-td>
				<text class="font-weight-bold">{{detailInfo.preferentialPrice ? '优惠金额:' : ''}}</text>
			</u-td>
		    <u-td>
				<text class="font-weight-bold">{{detailInfo.preferentialPrice || ''}}</text>
			</u-td>
		    <u-td>
				<text class="font-weight-bold">合计金额:</text>
			</u-td>
		    <u-td>
				<text class="font-weight-bold">
					{{
						detailInfo.orderProjectList.reduce((prev, item, index)=>{
							return prev + item.price
						},0).toFixed(2)
					}}
				</text>
			</u-td>
		  </u-tr>
      	</u-table>
		<view class="item-info_order_price flex justify-btw align-center" style="margin-top: 12rpx;">
			<view class="flex_clm justify-start align-start">
				<text class="text_10">下单时间：</text>
				<text class="text_11">{{detailInfo.createTime}}</text>
			</view>
			<text class="text_12">定金：￥{{detailInfo.startPrice}}</text>
		</view>
		<view class="flex justify-start align-start" style="margin-top: 16rpx;">
			<image src="../../static/images/table_info.png" mode="" style="width: 418rpx;height: 142rpx;"></image>
		</view>
      </view>
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
      <view class="item-info_pricetitle flex justify-btw align-center">
        <text>项目总价：</text>
        <view class="">
          <text style="font-size: 24rpx;">￥</text>
          <text>{{detailInfo.price}}</text>
        </view>
      </view>
	  <!-- 首款 -->
      <view class="item-info_price flex justify-btw align-center">
        <view class="left flex justify-start align-center">
			<text style="font-size: 28rpx;font-weight: 500;color: #333;">
				{{ detailInfo.status>1 ? '首款支付' : '待付首款' }}：
			</text>
          <text>￥</text>
          <text>{{ detailInfo.startPrice }}</text>
			<view 
				class="alreadyPayIcon flex justify-center align-center"
				v-show="detailInfo.status>1"
			>已支付</view>
        </view>
        <block>
        	<text class="text_9" v-if="detailInfo.status>1">{{ detailInfo.startPayTime }}</text>
        	<view
        		v-else
        		class="right flex justify-center align-center"
				@tap.stop="toPay(1)"
        	>去付款</view>
        </block>
      </view>
	  <!-- 尾款 -->
	  <view 
		v-if="detailInfo.status>=6"
		class="item-info_price flex justify-btw align-center"
		style="margin-top: 20rpx;"
	>
	    <view class="left flex justify-start align-center">
			<text style="font-size: 28rpx;font-weight: 500;color: #333;">
				{{ detailInfo.status==7 ? '尾款支付' : '待付尾款' }}：
			</text>
	      <text>￥</text>
	      <text>{{ detailInfo.endPrice }}</text>
		  <view
		  	class="alreadyPayIcon flex justify-center align-center"
		  	v-show="detailInfo.status>6"
		  >已支付</view>
	    </view>
	    <block>
			<text class="text_9" v-if="detailInfo.status==7">{{ detailInfo.endPayTime }}</text>
			<view
				v-else
				class="right flex justify-center align-center"
				@tap.stop="toPay(2)"
			>去付款</view>
		</block>
	  </view>
    </view>
    <view class="order-info margin-btw">
      <view class="order-info_title">订单信息</view>
	  <view class="order-info_item flex justify-btw align-center">
	  	<view class="left flex justify-start align-center">
			<text>订单编号</text> <text>{{ detailInfo.orderNum }}</text>
		</view>
		<view class="rightBtn flex justify-center align-center" @tap="toCopy(detailInfo.orderNum)">复制</view>
	  </view>
	  <view  class="order-info_item flex justify-btw align-center">
	  	<view class="left flex justify-start align-center">
			<text>下单时间</text> <text>{{ detailInfo.createTime }}</text>
		</view>
	  </view>
    </view>
	<view style="height: 40rpx;"></view>
	
	
	
	<!-- 节点弹框 -->
	<u-popup
		v-model="showDotInfo" 
		mode="center" 
		border-radius="25" 
		:overlayStyle="{'touch-action': none}"
		:mask-close-able="true"
		:closeable="true"
	
	>
		<scroll-view class="dotInfo" scroll-y="true">
			<view class="flex justify-center" style="margin-top: 36;margin-bottom: 46rpx;">
				<text class="text_100">{{dotInfoTitle}}</text>
			</view>
			<u-time-line v-if="dotInfoList.length">
				<u-time-line-item nodeTop="2" v-for="(item, index) in dotInfoList" :key="index">
					<template v-slot:node>
						<view class="flex justify-center align-center" style="width: 24rpx;height: 24rpx;background-color: #3b8cdc;border-radius: 50%;">
							<view style="width: 14rpx;height: 14rpx;background-color: #fff;border-radius: 50%;"></view>
						</view>
					</template>
					<template v-slot:content>
						<view>
							<view class="text_99">{{ item.createTime }}</view>
							<view style="background-color: #f7f7f7;margin-top: 15rpx;border-radius: 16rpx;padding: 20rpx;">
								<text class="text_97">{{item.content}}</text>
								<view class="flex flex-wrap justify-start align-start" style="margin-top: 16rpx;">
									<image
										v-for="(innerItem,innerIndex) in item.images.split(',')"
										:key="innerIndex"
										:src="innerItem"
										mode="aspectFill" 
										style="width: 118rpx;height: 118rpx;border-radius: 0rpx;margin: 0 6rpx 6rpx 0;"
										@tap.stop="previewImg(item.images.split(','), innerIndex)" 
									></image>
								</view>
							</view>
						</view>
					</template>
				</u-time-line-item>
			</u-time-line>
			<view 
				class="flex_clm justify-center align-center" 
				v-else 
				style="width: 100%;height: 80%;" 
			>
				<image 
					src="http://shejihm.oss-cn-beijing.aliyuncs.com/20240424114859171393053911987a35890.jpg" 
					mode=""
					style="width: 200rpx;height: 200rpx;"
				></image>
				<text class="text_98">不用着急，我们正在全力出图</text>
			</view>
		</scroll-view>
	</u-popup>
  </view>
</template>

<script setup>
  import { getCurrentInstance, reactive, ref } from 'vue';
  import Qs from 'qs'
  import { onReady, onShow, onLoad } from '@dcloudio/uni-app';
  const { proxy } = getCurrentInstance();
  const showDotInfo = ref(false)
  const dotInfoList = ref([])
  const dotInfoTitle = ref('')
  const option = ref({}) 
  const detailInfo = ref({
	  orderNodeList: [],
	  orderProjectAdjustList:[],
	  orderProjectList:[],
	  sysUserInfo:[],
	  sysUserInfoSalesperson:[],
	  userInfo:{},
  })
  
  onLoad((opt)=>{
	  option.value = opt
	  getList()
	  console.log(option.value.id)
  })
  function previewImg(urls, index=0){
  	uni.previewImage({
  		current: index, //所预览当前图片的下标
  		urls: urls,
  		indicator: 'number'
  	})
  }
  // 点击节点弹出信息
  function clickTop(dot){
	let query = {
		orderNodeId: detailInfo.value.orderNodeList[dot].id
	}
	console.log(query)
	proxy.api.speedShowApi(query).then((res)=>{
	  dotInfoList.value = res.data.data || res.data.rows
	  console.log('res',res)
	  dotInfoTitle.value = `${detailInfo.value?.orderNodeList[dot]?.name}(${detailInfo.value?.orderNodeList[dot]?.nodeTime.split(' ')[0]})`
	  showDotInfo.value = true
	}).catch(()=>{
		
	})
	
  }
  // 获取订单详情
  function getList(){
	  let query = {
		  id: option.value.id
	  }
	  proxy.api.orderDetail(query).then(res=>{
		  console.log(res.data)
		detailInfo.value = res.data.data
	  })
  }
  function toPay(type){
	let query = {
	  type,
	  price: detailInfo.value.price,
	  id: detailInfo.value.id,
	  startPrice: detailInfo.value.startPrice,
	  endPrice: detailInfo.value.endPrice,
	}
	uni.navigateTo({
		url:`/pages/order/pay?${Qs.stringify(query)}`  //type:1首款 2尾款
	})
  }
  function toCopy(value){
  	if(!value){
  		proxy.tui.toast('订单号为空')
  		return
  	}
  	uni.setClipboardData({
  		data: value,
  		showToast: false,
  		success: ()=>{
  			proxy.tui.toast("订单号已复制")
  		}
  	});
  }
</script>

<style lang="scss" scoped>
  page{
    background-color: $uni-bg-color-grey;
    height: 100vh;
  }
  ::v-deep .u-time-axis{
	  margin-left: 15rpx;
  }
  .text_9{
	  @include str(24rpx, 500, #999);
	  line-height: 33rpx;
  }
  .text_10{
  	  @include str(16rpx, 500, #0e0e0e);
  	  line-height: 23rpx;
  }
  .text_11{
  	  @include str(14rpx, 400, #1b1b1b);
  	  line-height: 20rpx;
  }
  .text_12{
  	  @include str(22rpx, 500, #f00);
  	  line-height: 29rpx;
  }
  .text_97{
  	  @include str(24rpx, bold, #000);
  	  line-height: 33rpx;
	  margin-bottom: 15rpx;
  }
  .text_98{
  	  @include str(24rpx, 400, #999);
  	  line-height: 40rpx;
  }
  .text_99{
  	  @include str(24rpx, bold, #000);
  	  line-height: 33rpx;
  }
  .text_100{
	  @include str(28rpx, bold, #000);
	  line-height: 40rpx;
  }
  .alreadyPayIcon{
	font-family: 'PingFang SC';
	font-weight: bold;
	font-size: 22rpx;
	color: #3B8CDC;
	line-height: 30rpx;
	margin-left: 16rpx;
	width: 78rpx;
	height: 32rpx;
	background: rgba(255,255,255,0.39);
	border-radius: 6rpx;
	border: 1rpx solid #3B8CDC;
	background-color: #fff;
	position: relative;
	top: 3rpx;
  }
  // .utable ::v-deep .u-tr{
	 //  background-color: red !important;
  // }
  .container{
    background-color: $uni-bg-color-grey;
    height: 100vh;
    .top{
      border-radius: 16rpx;
      background: linear-gradient(180deg, #60a7ee 0%, #4390dd 40%, #559bdf 60%, #fff 90%);
      overflow: hidden;
      &_info{
        padding: 26rpx 70rpx 20rpx 50rpx;
      }
      &_image{
        background-color: #fff;
        border-radius: 16rpx 16rpx 0 0;
        overflow: hidden;
        padding: 0 36rpx;
        .dot{
          width: 96rpx;
          height: 16rpx;
          position: relative;
          top: -42rpx;
        }
        &_item{
          padding:24rpx 0;
          @include str(26rpx, bold, #999);
          line-height: 37rpx;
          &>image{
            margin-bottom: 12rpx;
            width: 88rpx;
            height: 88rpx;
          }
        }
      }
    }
    .item-info{
      // height: 200px;
      margin: 20rpx 0;
      border-radius: 16rpx;
      background-color: #fff;
      padding: 20rpx 24rpx 30rpx 24rpx;
      &_order{
		  border: 1rpx solid #000;
		  box-sizing: border-box;
		  padding: 16rpx 14rpx 8rpx;
		  &_nav{
			  @include str(26rpx, 500, #000);
			  position: relative;
			  line-height: 52rpx;
		  }
		  &_title{
		    @include str(16rpx, 500, #0e0e0e);
		    line-height: 23rpx;
		  }
	  }
      &_pricetitle{
        line-height: 96rpx;
        &>text{
          @include str(24rpx, bold, #333);
        }
        &>view>text{
          @include str(34rpx, bold, #f00);
        }
      }
      &_price{
        background-color: $uni-bg-color-grey;
        border-radius: 10rpx;
        line-height: 90rpx;
        padding: 0 24rpx;
        .left{
          @include str(30rpx, bold, #f00);
        }
        .right{
          line-height: 50rpx;
          @include str(28rpx, 500, #fff);
          padding: 0 34rpx;
          background-color: $uni-color-primary;
          display: inline-block;
          border-radius: 28rpx;
        }
      }
    }
    .order-info{
      border-radius: 16rpx;
      background-color: #fff;
	  padding: 0 22rpx;
      &_title{
        line-height: 102rpx;
        @include str(30rpx, bold, #212121);
        border-bottom: 2rpx solid #f5f5f5;
      }
	  &_item{
		  line-height: 100rpx;
		  .left{
			  &>text:first-child{
				@include str(28rpx, 500, #666);
			  }
			  &>text:last-child{
			  	@include str(28rpx, 500, #212121);
				margin-left: 48rpx;
			  }
		  }
		  .rightBtn{
			  width: 106rpx;
			  height: 46rpx;
			  background: rgba(255,255,255,0.39);
			  border-radius: 23rpx;
			  border: 2rpx solid #666666;
			  @include str(28rpx, 500, #666);
		  }
	  }
    }
  }
  
  .dotInfo{
	  width: 630rpx;
	  height: 1076rpx;
	  overflow-y: scroll;
	  padding: 36rpx 26rpx;
  }
</style>